/*
  Date Range Picker Styles
  ------------------------------------------------------------------------------
*/

.range-picker {
  position: fixed;
  text-align: center;
  background-color: $cf-grey-5;
  border: $ix-border solid $c-pool;
  padding: $ix-marg-b;
  border-radius: $ix-radius;
  z-index: 9999;
}
.react-datepicker {
  font-family: $ix-text-font;
  font-size: $ix-text-base-1;
}

.range-picker--date-pickers {
  flex-wrap: nowrap;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: $ix-marg-b;
}
.range-picker--date-picker {
  margin: $ix-marg-a;
  margin-top: 0;
}
.react-datepicker-wrapper,
.react-datepicker__input-container {
  width: 100%;
}

.range-picker--calendar-container {
  position: relative;
}

.range-picker--calendar {
  background-color: transparent;
  border: none;
  color: $c-pool;
  display: flex;
  flex-direction: row;
  align-items: stretch;

  .react-datepicker__month-container {
    background-color: $cf-grey-15;
    border-radius: $ix-radius $ix-radius;
    width: 260px;
  }

  .react-datepicker__navigation {
    outline: none;
    cursor: pointer;
  }

  .react-datepicker__navigation--next {
    border-left-color: $cf-grey-95;
  }

  .react-datepicker__navigation--previous {
    border-right-color: $cf-grey-95;
  }

  .range-picker--day {
    color: $cf-grey-35;

    &:hover {
      background-color: $c-laser;
      color: $cf-white;
    }
  }

  .range-picker--day-in-month {
    color: $cf-grey-75;

    &:hover {
      background-color: $c-laser;
      color: $cf-white;
    }
  }

  .react-datepicker__day--in-selecting-range {
    background-color: #00a3ff;
    color: $cf-white;
  }

  .react-datepicker__day--in-range {
    background-color: #00a3ff;
    color: $cf-white;
  }

  .range-picker--active-day {
    color: $cf-white;
  }

  .react-datepicker__day--selected {
    background-color: $c-pool;
    color: $cf-grey-95;
  }

  .react-datepicker__triangle {
    display: none;
  }

  .react-datepicker__header {
    border-radius: 0;
    padding: 0;
    border: none;
    background: transparent;

    .react-datepicker__day-name {
      color: $c-rainforest;
      font-weight: 700;
    }

    .react-datepicker__current-month {
      width: 100%;
      border-radius: $ix-radius $ix-radius 0 0;
      background-color: $cf-grey-15;
      color: $cf-grey-95;
      font-weight: 700;
      height: $ix-marg-d;
      display: inline-flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
  }

  .react-datepicker__time-container {
    width: 70px;
    border: none;
    margin-left: $ix-border;
    border-radius: $ix-radius;
    background-color: transparent;
    display: flex;
    flex-direction: column;

    .react-datepicker__header--time {
      width: 100%;
      border-radius: $ix-radius $ix-radius 0 0;
      background-color: $cf-grey-15;
      font-weight: 700;
      flex: 0 0 $ix-marg-d;
      display: inline-flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .react-datepicker-time__header {
      color: $cf-grey-95;
    }

    .react-datepicker__time {
      flex: 1 0 calc(100% - #{$ix-marg-d});
      background-color: transparent;

      .react-datepicker__time-box {
        width: 100%;
        height: 100%;
        background-color: $cf-grey-15;
        color: $cf-grey-75;
        border-radius: 0 0 $ix-radius $ix-radius;
        position: relative;

        .react-datepicker__time-list {
          position: absolute;
          width: 100%;
          height: 100%;
          font-size: $ix-text-base;
          @include custom-scrollbar-round($cf-grey-15, $c-pool);

          .react-datepicker__time-list-item {
            height: initial;
            padding: $ix-marg-a $ix-marg-b;
            transition: background-color 0.25s ease, color 0.25s ease;
            line-height: 1.25em;
            margin: 0;
          }

          .react-datepicker__time-list-item:hover {
            background-color: $cf-grey-25;
            color: $cf-white;
          }

          .react-datepicker__time-list-item--selected,
          .react-datepicker__time-list-item--selected:hover {
            background-color: $c-pool;
          }
        }
      }
    }
  }
}

.range-picker--submit {
  margin-bottom: $ix-marg-b;
}

.range-picker--dismiss {
  position: absolute;
  z-index: 5000;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  width: 24px;
  height: 24px;
  outline: none;
  border-radius: 50%;
  background-color: $c-pool;
  transition: background-color 0.25s ease;
  border: 0;

  &:before,
  &:after {
    content: '';
    position: absolute;
    width: 13px;
    height: 3px;
    top: 50%;
    left: 50%;
    border-radius: 1px;
    background-color: $cf-white;
  }

  &:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  &:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  &:hover {
    background-color: $c-laser;
    cursor: pointer;
  }
}

.date-picker__select-time-range {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 231px;
  height: 100%;

  .cf-form--element {
    margin-bottom: 0;
  }
}

.date-picker__select-date-picker {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 251px;
  height: 100%;
}

.date-picker__apply-time-range {
  margin: $ix-marg-b 0;
}

.date-picker__input {
  max-width: 193px;

  input {
    background-color: transparent;
    border: 2px solid $cf-grey-35;
  }
}

.date-picker--timezone-container {
  margin-bottom: 24px;
  button {
    background: $cf-grey-35;
  }
}

.date-picker--column-title {
  margin-bottom: $ix-marg-c;
}

.date-picker--label {
  margin-bottom: $ix-marg-b;
  margin-top: $ix-marg-a;
}

.date-picker--label__options {
  margin-bottom: $ix-marg-a;
  margin-top: $ix-marg-b;
}

.date-picker--label__timezone {
  margin-bottom: $ix-marg-b;
}

.date-picker--label__calendar {
  align-self: flex-start;
  margin-bottom: $ix-marg-b;
  margin-top: $ix-marg-a;
}

.cf-dropdown-menu.date-picker--menu {
  background: #f1f1f31a;
  position: absolute;
  right: 0;
  padding: 0 8px 0 0;
}

.cf-dropdown-menu--contents {
  .date-picker--calendar-dropdown,
  .date-picker--calendar-dropdown:hover {
    background-color: transparent !important;
    border-right: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: stretch;
    padding: 8px;
  }
}

.date-picker--calendar-icon {
  display: inline-flex;
  padding: 0 12px;
  background: #4d4d60;
  height: 100%;
  align-items: center;
  position: absolute;
}

.date-picker--question-mark {
  margin-left: $ix-marg-b;
}

.date-picker--form {
  .cf-form--label,
  .cf-form--element-error {
    font-size: 14px;
  }
}
